<template>
  <div v-show="$store.state.design.fontShow" class="toolbox ovtext">
    <h3 class="tooltop">Select The Font</h3>
    <div class="toolboxmain">
      <div
        v-for="(item,key) in fontData"
        :key="key"
        class="one-font"
        :class="{active:key===$store.state.design.textObj.font}"
        :title="item.name"
        @click="pickFont(key)"
      ><img :src="item.ico" alt="img"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['fontData'],
  methods: {
    pickFont(k) {
      console.log(k);
      this.$store.commit('design/setFontShow', false);
      console.log(this.$store.state.design.textObj.font);
      if (this.$store.state.design.textObj.font !== k) {
        this.$store.commit('design/setTextObj', { key: 'font', value: k });
        var myuri = encodeURIComponent(
          JSON.stringify(this.$store.state.design.textObj)
        );
        getFontPic(this.$store.state.design.textObj, function(url) {
          svgTool.changeImg(url, myuri);
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.toolbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: auto;
}
.toolboxmain{
  height: calc(100% - 55px);
  overflow: auto;
}
.tooltop{
  padding-top: 5px;
  height: 50px;
  line-height: 50px;
  text-indent: 20px;
  font-weight: 700;
}
.ovtext{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.one-font {
  position: relative;
  height: 40px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.one-font img {
  position: absolute;
  height: 20px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.one-font:hover {
  border-color: #339;
}
.one-font.active {
  /* border-color: transparent; */
  background-color: #dbd9da;
}
</style>
